<template>
  <div ref="chartContainer" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import VChart from '@visactor/vchart';

// 图表容器引用
const chartContainer = ref(null);
let vchart = null;

// 生成1-12月的绩效数据
const generatePerformanceData = () => {
  const months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
  const performanceTypes = ['业绩指标', '效率指标', '质量指标'];
  const data = [];

  months.forEach(month => {
    // 为每个月生成三类指标的随机数据（模拟实际业务场景）
    performanceTypes.forEach(type => {
      // 生成50-100之间的随机值，确保总和可计算百分比
      const value = Math.floor(Math.random() * 50) + 50;
      data.push({
        month: month,
        type: type,
        value: value,
        department: '研发部' // 可根据需要修改为动态部门
      });
    });
  });

  return data;
};

// 图表配置
const getSpec = () => ({
  type: 'bar',
  data: [
    {
      id: 'performanceData',
      values: generatePerformanceData()
    }
  ],
  xField: 'month', // X轴为月份（1-12月）
  yField: 'value', // Y轴为绩效值
  seriesField: 'type', // 按指标类型区分系列
  percent: true, // 启用百分比模式（堆叠占比）
  stack: true, // 堆叠显示
  title: {
    visible: true,
    text: '部门月度绩效指标占比',
    style: {
      fontSize: 16,
      fontWeight: 'bold'
    }
  },
  legends: {
    visible: true,
    position: 'top',
    orient: 'horizontal'
  },
  axes: [
    {
      orient: 'left',
      label: {
        // 格式化Y轴为百分比显示
        formatMethod: val => `${(val * 100).toFixed(1)}%`
      },
      title: {
        visible: true,
        text: '占比'
      }
    },
    {
      orient: 'bottom',
      title: {
        visible: true,
        text: '月份'
      }
    }
  ],
  tooltip: {
    visible: true,
    formatter: (datum) => {
      return {
        title: datum.month,
        content: [
          { name: '指标类型', value: datum.type },
          { name: '占比', value: `${(datum.value * 100).toFixed(1)}%` },
          { name: '原始值', value: datum.value }
        ]
      };
    }
  },
  // 自定义颜色方案
  palette: ['#409EFF', '#67C23A', '#F56C6C']
});

// 初始化图表
const initChart = () => {
  if (chartContainer.value) {
    vchart = new VChart(getSpec(), { dom: chartContainer.value });
    vchart.renderSync();
  }
};

// 组件挂载时初始化图表
onMounted(initChart);

// 组件卸载时销毁图表
onUnmounted(() => {
  if (vchart) {
    vchart.release();
    vchart = null;
  }
});
</script>

<style scoped>
/* 确保图表容器占满父元素 */
:deep(.vchart) {
  width: 100% !important;
  height: 100% !important;
}
</style>